<template>
  <div id="item" @click="handleMovie(data.id)">
    <img :src="data.cover" alt="" />
    <p class="title">{{data.name|format()}}</p>
  </div>
</template>

<script>
export default {
  name: "ItemBox",
  props: {
    data: {
      type: Object,
    },
    
  },
  methods:{
    handleMovie(id){
      console.log(id)
      this.$router.push(`/movie?id=${id}`)
    }
  }
  
};
</script>

<style scoped>
#item{
    margin-bottom: 10px;
}
img {
  width: 220px;
  height: 220px;
}
.title{
  font-size: 26px;
  color: #333333;
}

</style>